<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1.引入 ECharts 文件 -->
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">

    // 3.1 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));

    // 3.2 指定图表的配置项和数据
    const colors = ['#EE6666', '#5470C6'];
    let option = {
      title: {
        text: '薪资 Salary'
      },
      color: colors,
      legend: {},
      grid: {
        top: 70,
        bottom: 80
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: false
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                return (
                  'Precipitation  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                );
              }
            }
          },
          // prettier-ignore
          data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
      ],
      yAxis: [
      {
          type: 'value',
          min: 0,
          max: 30000,
          interval: 5000,
        }
      ],
      series: [
        {
          name: '期望薪资',
          type: 'line',
          symbol: 'circle',
          symbolSize: 0,
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: [
            17500, 12500, 13000, 18000, 18500, 19000, 17560, 18220, 18700, 18080, 12000, 12600
          ]
        },
        {
          name: '实际薪资',
          type: 'line',
          symbol: 'circle',
          symbolSize: 0,
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: [
            10100, 12000, 13000, 14000, 15000, 14000, 13106, 14606, 15504, 14004, 10003, 10000
          ]
        },
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100
        },
        {
          start: 0,
          end: 10
        }
      ],
    }

    // 3.3使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>